<template>
	<div class="page" v-cloak>
		<van-nav-bar title="我的资料" left-text="返回" fixed left-arrow @click-left="back" />
		<div class="userHeaderInfo" style="margin-top:46px">
			<img class="userHeaderInfo-img" :src="info.HeadImgUrl"/>
		</div>
		<van-cell-group style="margin-bottom:46px">
			<van-field v-model="info.NickName" label="昵称" placeholder="请输入昵称" />
			<van-field v-model="info.Name" label="姓名" placeholder="请输入姓名" />
			<div class="van-cell van-field van-hairline">
				<div class="van-cell__title"><span class="van-cell__text">性别</span></div>
				<div class="van-cell__value">
					<select class="van-field__control" v-model="info.Sex">
						<option value="">选择性别</option>
						<option value="1">男</option>
						<option value="2">女</option>
					</select>
				</div>
			</div>
			<van-field v-model="info.Birthday" label="出生年月" placeholder="请输入出生年月" @click="date" readonly/>
			<van-field v-model="info.Tel" label="绑定手机" placeholder="请输入手机号" />
			<van-field v-model="info.IDCard" label="身份证号" placeholder="请输入身份证号" />
			<van-field v-model="info.UserAddress" label="收货地址" placeholder="请输入地址" />
		</van-cell-group>
		<van-goods-action>
		  <van-goods-action-big-btn text="提交"  primary @click="onsubmit"/>
		</van-goods-action>
		<van-actionsheet v-model="dateShow" title="选择日期">
			<van-datetime-picker
				v-model="dateA"
				:max-date="maxDate"
				:min-date="minDate"
				type="date"
				confirm="dateclick"
				cancel="dateCancel"
				:formatter="formatter"
				/>
		</van-actionsheet>
	</div>
</template>
<script>
	import { Toast } from 'vant';
	export default {
		data() {
			return {
				dateShow:false,
				minDate: new Date(1900, 1, 1),
				maxDate: new Date(),
				dateA:new Date(1980, 1, 1),
				info:{
					NickName:"",
					Name:"",
					Sex:"",
					Birthday:"",
					Tel:"",
					IDCard:"",
					UserAddress:""
				}

			}
		},
		mounted:function(){	
			Toast.loading({message: '加载中...',duration: 0});
			this.onLoad();
		},
		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`;
				} else if (type === 'month') {
					return `${value}月`
				}
				return value;
				},
			back() {
				this.$router.go(-1); //返回上一层
			},
			date(){
				this.dateShow=true
			},
			dateclick(value){
				console.log(value);
				
				this.info.Birthday=formatDateTime(this.dateA)
				this.dateShow=false
			},
			dateCancel(){
				this.dateShow=false
			},
			formatDateTime(obj) {
			var date = new Date(obj);
			var y = 1900 + date.getYear();
			var m = "0" + (date.getMonth() + 1);
			var d = "0" + date.getDate();
			return (
				y +
				"-" +
				m.substring(m.length - 2, m.length) +
				"-" +
				d.substring(d.length - 2, d.length)
			);
			},
			onLoad() {
				this.$http.get(this.httpUrl + "/user/edit").then((response) => {
					if(response.data.status==undefined){
						Toast.clear();
					this.info = response.data;
					}else{ 
						//window.location.href=this.httpUrl
						}
				}).catch(function(error) {
					console.log(error);
				})
			},
			onsubmit() {
				if(this.info.NickName != "" ) {
					const toast1 = Toast.loading({mask: true,message: '提交中...'});
					this.$http.post(this.httpUrl + "/user/editinfo",{NickName:this.info.NickName,Name:this.info.Name,Sex:this.info.Sex,Birthday:this.info.Birthday,Tel:this.info.Tel,IDCard:this.info.IDCard,UserAddress:this.info.UserAddress,UserID:this.info.UserID,OpenID:this.info.OpenID},{headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then((response) => {
						if(response.data.status!="timeout"){
							toast1.clear();
						console.log(response.data);
						if(response.data.status == "y") {
							Toast.success('更新成功');
						}else{
							Toast(response.data.info);
						}
						}else{ 
							//window.location.href=this.httpUrl
							}
					}).catch(function(error) {
						console.log(error);
					})
				} else {
					Toast('昵称不能为空');
				}
			}
		}
	}
</script>

<style>
.userHeaderInfo{ padding:20px;overflow: hidden;background:#fff; text-align: center;}
.userHeaderInfo-img{ width: 80px; height: 80px; border-radius:40px;}
</style>